import {defineComponent, ref} from "vue";

export default defineComponent({
    props: {
        queryParams: Object,
        handleQuery: Function
    },
    setup(props) {
        const queryFormRef = ref(null)

        // 回车
        const enterDown = (e) => {
            if (e.code === 'Enter') {
                e.preventDefault();
                props.handleQuery()
            }
        }

        const resetQuery = () => {
            queryFormRef.value.resetFields()
            props.handleQuery()
        }

        const sortArray = [{
            label: '按创建时间',
            value: 1,
        }, {
            label: '按点赞次数',
            value: 2,
        }, {
            label: '按浏览次数',
            value: 3,
        }]

        return (props) => {
            const sortOption = sortArray.map(item => {
                return <el-option
                    key={item.value}
                    label={item.label}
                    value={item.value}
                />
            })
            return <>
                <el-form model={props.queryParams.value} ref={queryFormRef} size={'small'} inline={true}>
                    <el-form-item label={"排序"} prop={'sort'}>
                        <el-select v-model={props.queryParams.value.sort} className="m-2" placeholder="请选择排序方式"
                                   size="small">
                            {sortOption}
                        </el-select>
                    </el-form-item>
                    <el-form-item label={'资讯标题'} name={'info_title'} prop={'info_title'}>
                        <el-input
                            style={{width: '200px'}}
                            v-model={props.queryParams.value.info_title}
                            placeholder={'请输入资讯标题'}
                            clearable
                            onKeydown={(e) => {
                                enterDown(e)
                            }}
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" onclick={() => {
                            props.handleQuery()
                        }
                        }>搜索
                        </el-button>
                        <el-button onclick={() => resetQuery()}>重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </>
        }
    }
})